<template>
	<div class="icons">
		<swiper :options="swiperOption">
			<swiper-slide v-for="(page, index) of pages" :key="index">
				<!--<div class="icon" v-for="item of iconList" :key="item.id">-->				
				<div class="icon" v-for="item of page" :key="item.id">
					<div class="icon-img">
						<img class="icon-img-content" :src='item.imgUrl'>
					</div>
					<p class="icon-desc">{{item.desc}}</p>
				</div>
			</swiper-slide>
		</swiper>
	</div>
</template>

<script>
	export default {
		name: 'HomeIcons',
		
		props: {
			list: Array
		},
		
		data: function(){
			return {
				swiperOption: {
					atuoplay: false
				},
//				图标数据 包含图标的id 图片地址  图标名称
				/*iconList: [
					{
						id: "img001",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/95/f3dd6c383aeb3b02.png",
						desc: '景点门票'
					},
					{
						id: "img002",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/96/c70f1e85ae4a4f02.png",
						desc: '景点特色'
					},
					{
						id: "img003",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/ab/6f7d6e44963c9302.png",
						desc: '温泉'
					},
					{
						id: "img004",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/54/35899492b1302802.png",
						desc: '热门景点'
					},
					{
						id: "img005",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1804/ff/fdf170ee89594b02.png",
						desc: '必游景点'
					},
					{
						id: "img006",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/76/eb88861d78fb9902.png",
						desc: '动植物园'
					},
					{
						id: "img007",
						imgUrl: "http://mp-piao-admincp.qunarzz.com/mp_piao_admin_mp_piao_admin/admin/20191/de711920c71e38287d9f95f7910aa1aa.png",
						desc: '精品小团'
					},
					{
						id: "img008",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/fa/2548667cb6e902.png",
						desc: '名胜古迹'
					},
					{
						id: "img009",
						imgUrl: "http://img1.qunarzz.com/piao/fusion/1803/75/eca3ce656c886502.png",
						desc: '山水风景区'
					},
				]*/
			}
		},
		
		computed: {
			pages () {
				const pages = [];
//				this.iconList.forEach((item, index) => {
				this.list.forEach((item, index) => {
//					console.log('index/8 :', index/8);
					const page = Math.floor(index/8)
//					console.log('-----page: ',page);
//					console.log(pages.length);
					if(!pages[page]){
						pages[page] = []
					}
					pages[page].push(item)
				});
				return pages;
			}
		}
	}
</script>

<style lang="stylus" scoped>
	@import '~@/assets/styles/varibles.styl'
	@import '~@/assets/styles/mixins.styl'
	/*.icons >>> 
		width: 100%
		overflow:hidden
		height: 0
		padding-bottom: 50%*/
		
		.icons >>> .swiper-container
			height: 0
			padding-bottom: 50%
			
		.icons
			margin-top: .1rem
		.icon
			position: relative
			float: left
			width: 25%
			padding-bottom: 25%
			height: 0
			.icon-img
				position: absolute
				top: 0
				left: 0
				right: 0
				bottom: .44rem
				box-sizing: border-box
				padding: .1rem
				.icon-img-content
					display: block
					margin: 0 auto
					height: 100%
			.icon-desc
				position: absolute
				left: 0
				right: 0
				bottom: 0
				height: .44rem
				line-height: .44rem
				text-align: center
				/*overflow:hidden
				white-space: nowrap
				text-overflow: ellipsis*/
				ellipsis()
</style>